<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: wjh
 * @Date: 2024-02-19 14:13:48
 * @LastEditors: wjh
 * @LastEditTime: 2024-03-18 16:10:57
-->
<template>
    <div id="Ruralcredit" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
        <!--<van-swipe v-if="ListData.length>0" class="my-swope" :autoplay="2000" indicator-color="red">-->
        <!--<van-swipe-item :key="1">-->
        <!--<div style="border: 0px solid red;height: 100vh;width: 100%;overflow-y: auto;">-->
        <!--<img src="./../../../static/imgs/ZLJ/3.jpg" alt="" style="width: 100%;">-->
        <!--</div>-->
        <!--</van-swipe-item>-->
        <!--<van-swipe-item :key="2">-->
        <!--<div style="border: 0px solid red;height: 100vh;width: 100%;overflow-y: auto;">-->
        <!--<img src="./../../../static/imgs/ZLJ/4.jpg" alt="" style="width: 100%;">-->
        <!--</div>-->
        <!--</van-swipe-item>-->
        <!--<van-swipe-item :key="3">-->
        <!--<div id="divTree" style="border: 0px solid red;height: 100vh;width: 100%;background-color: #f7f8fa;">-->
        <!--<van-steps direction="vertical" :active="ListData.length">-->
        <!--<div style="text-align: center;">-->
        <!--<h1>联系方式</h1>-->
        <!--</div>-->
        <!--<div style="overflow-y: auto;height:90vh">-->
        <!--<div v-for="(item, index) in ListData" :key="index">-->
        <!--<div class="divConent">-->
        <!--<p><van-icon name="cash-back-record" />所属区县：{{ item.belongCountry }}</p>-->
        <!--<p><van-icon name="bill" />所属乡镇：{{ item.belongTown }}</p>-->
        <!--<p><van-icon name="balance-list" />支行名称：{{ item.secondBranch }}</p>-->
        <!--<p><van-icon name="location" />支行地址：{{ item.secondBranchAddress }}</p>-->
        <!--<p><van-icon name="friends" />联系客户经理：{{ item.contactManagerName }}</p>-->
        <!--<p><van-icon name="phone" />联系客户经理手机号：<span style="color: blue"-->
        <!--@click="phoneCall(item.contactManagerPhone)">{{ item.contactManagerPhone }}</span></p>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</van-steps>-->
        <!--</div>-->
        <!--</van-swipe-item>-->
        <!--</van-swipe>-->
        <!--<div v-else style="height: 78vh;text-align:center;padding-top: 20vh;">-->
        <!--<div style="margin-bottom: 10px;">-->
        <!--<img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />-->
        <!--</div>-->
        <!--<div>暂无数据</div>-->
        <!--</div>-->
        <img style="width: 100%;height: 40vh;" src="../../../static/imgs/ZLJ/MLD/2banner.png">
        <div class="content">
            <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 20px;">
                <p class="subtitle">联系方式</p>
            </div>
            <div v-if="ListData.length > 0">
                <div v-for="(item, index) in ListData" :key="index">
                    <p> <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/3.png">所属区县：{{
        item.belongCountry }}</p>
                    <p> <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/4.png">所属乡镇：{{
        item.belongTown }}</p>
                    <p><img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/5.png">支行名称：{{
        item.secondBranch }}</p>
                    <p><img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/6.png">支行地址：{{
        item.secondBranchAddress }}</p>
                    <p><img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/7.png">联系客户经理：{{
        item.contactManagerName }}</p>
                    <p> <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/8.png">联系客户经理手机号：<span
                            style="color: blue" @click="phoneCall(item.contactManagerPhone)">{{ item.contactManagerPhone
                            }}</span></p>
                </div>
            </div>

            <div v-else style="height: 4vh;text-align:center;">
                <!-- <div style="margin-bottom: 10px;">
                    <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
                </div> -->
                <p style="font-size:24px;font-weight:700;">详询建行网点</p>
            </div>
            <!-- <p>
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/3.png">
                所属区县：定海区
            </p>
            <p>
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/4.png">
                所属乡镇：昌国街道</p>
            <p>
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/5.png">
                支行名称：定海支行营业部</p>
            <p>
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/6.png">
                支行地址：定海区解放西路38号</p>
            <p>
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/7.png">
                联系客户经理：李晓英</p>
            <p>
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/8.png">
                联系客户经理手机号：13957222938</p> -->
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">担保方式</p>
            </div>
            <p style="text-indent: 1rem;">
                <span style="color: #DBA00F;font-weight: bold;">01.抵押：</span>
                可上市交易的普通商品用房、高档公寓、别墅、商铺、经济适用房、其他居住用房、办公用房。
            </p>
            <p style="text-indent: 1rem;">农民宅基地资格权/使用权(能否抵/质押因地而异，具体详询惠州建行当地网点)。</p>
            <p style="text-indent: 1rem;">第二顺位抵押：详询建行客户经理。</p>
            <p style="text-indent: 1rem;">
                <span style="color: #DBA00F;font-weight: bold;">02.质押：</span>
                支持本外币定期储蓄存单、凭证式国债、储蓄国债(电子式)、记账式国债。

            </p>
            <p style="text-indent: 1rem;">
                <span style="color: #DBA00F;font-weight: bold;">03.保证：</span>
                自然人/村集体/融资担保公司担保。
            </p>
            <p style="text-indent: 1rem;">
                <span style="color: #DBA00F;font-weight: bold;">04.信用：</span>
                详询建行客户经理。
            </p>
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">贷款额度</p>
            </div>
            <p>单笔贷款额度最高不得超过住宅总造价或购房总价款的80%,上限100万元。需提供不低于20%的自筹资金证明。 </p>
            <div style="display: flex;align-items: center;margin-bottom: 10px;">
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/9.png">
                <div>
                    <p style="font-weight: bold;margin-bottom: 0px;">抵质押、阶段性担保/信用+抵押</p>
                    <p style="margin-bottom: 0px;">贷款额度不超过抵(质)押物价值的<span
                            style="font-weight: 700;font-size: 24px;">70%</span></p>
                </div>
            </div>
            <div style="display: flex;align-items: center;">
                <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/10.png">
                <div>
                    <p style="font-weight: bold;margin-bottom: 0px;">保证/信用</p>
                    <p style="margin-bottom: 0px;">贷款额度最高不超过60万元(含)</p>
                </div>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">贷款期限</p>
            </div>
            <p>
                <span style="color: #DBA00F;font-weight: bold;">抵押：</span>
            <p>抵押物为普通商品用房、高档公寓、别墅、经济适用房、其他居住用房，期限上限为<span style="font-weight: 700;font-size: 24px;">30</span>年。</p>
            <p>抵押物为商铺、办公用房，期限上限为<span style="font-weight: 700;font-size: 24px;">10</span>年。</p>
            <p>抵押物为农民住房财产权(含宅基地使用权),期限上限为<span style="font-weight: 700;font-size: 24px;">15</span>年。</p>
            </p>
            <p>
                <span style="color: #DBA00F;font-weight: bold;">质押：</span>
            <p>质押方式贷款期限最长不超过质押权利到期日。</p>
            </p>
            <p>
                <span style="color: #DBA00F;font-weight: bold;">保证：</span>
            <p>保证方式贷款期限<span style="font-weight: 700;font-size: 24px;">最长不超过5年</span>。</p>
            </p>
            <p>
                <span style="color: #DBA00F;font-weight: bold;">信用：</span>
            <p>信用方式贷款期限<span style="font-weight: 700;font-size: 24px;">最长不超过3年</span>。</p>
            </p>
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">自主支付</p>
            </div>
            <p>
                无法事先确定具体交易对象且贷款金额不超过三十万元的，可以采取借款人自主支付方式。
            </p>
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">分次支用</p>
            </div>
            <p>
                采用非循环额度，贷款额度在审批通过后三年有效，可分次支用。
            </p>
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">还款方式</p>
            </div>
            <div>
                <div
                    style="text-align: center;width: 50%;height:176px;background: #FFF9EB;float:left;padding-top: 25px;margin-right: 10px;">
                    <img src="../../../static/imgs/ZLJ/MLD/11.png">
                    <p style="margin-bottom: 0;font-weight: bold;">一次性还本付息</p>
                    <p>贷款期限1年(含)以内</p>
                </div>
                <div
                    style="text-align: center;width: calc(50% - 10px);height:176px;background: #FFF9EB;float:left;padding-top: 25px;margin-bottom: 10px;">
                    <img src="../../../static/imgs/ZLJ/MLD/12.png">
                    <p style="margin-bottom: 0;font-weight: bold;">等额本息、等额本金</p>
                    <p>贷款期限1年以上</p>
                </div>
                <div
                    style="width: 100%;height: 128px;background: #FFF9EB;clear: both;display: flex;align-items: center;margin-top: 10px;">
                    <img style="margin-right: 10px;" src="../../../static/imgs/ZLJ/MLD/13.png">
                    <div>
                        <p style="font-weight: bold;">灵活还款法</p>
                        <p>
                            贷款期限>5年，原则上最长可选择前2年按 月支付利息、第3年开始实行等额本息还款法
                        </p>
                    </div>
                </div>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0;">
                <p class="subtitle">贷款对象</p>
            </div>
            <p>
                <span style="color: #DBA00F;font-weight: bold;">年龄：</span>
            <p>年满18周岁(含),不超过<span style="font-weight: 700;font-size: 24px;">65</span>周岁(含),具有完全民事行为能力，且<span
                    style="font-weight: 700;font-size: 24px;">借款人年龄与贷款期限之和不超过75周岁</span>。</p>
            </p>
            <p>
                <span style="color: #DBA00F;font-weight: bold;">共同借款人：</span>
            <p>对于借款人年龄超过60周岁(含)的，原则上需增加其直系亲属(仅包括子女、(外)孙子孙女)作为共同借款人，或签署共同还款承诺书。</p>
            </p>
        </div>
    </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant'
import { zhejiangVillageLoanInfolist } from '../../utils/api'
export default {
    name: "Ruralcredit",
    data() {
        return {
            show: false,
            showEdition: false,
            value: '',
            bannerList: [],
            List: [
                {
                    name: "安居贷",
                    dw: "惠州农信",
                    dked: "100",
                    spsj: "1~3",
                    nhll: "4.85~8.05"
                }],
            ListData: [
                // {
                //     belongCountry: "定海区",
                //     belongTown: "昌国街道",
                //     secondBranch: "定海支行营业部",
                //     secondBranchAddress: "定海区解放西路38号",
                //     contactManagerName: "李晓英",
                //     contactManagerPhone: "13957222938",
                // },
            ]
        }
    },
    watch: {
        value() {

        }
    },
    created() {

    },
    mounted() {
        this.showEdition = this.$store.state.Edition
        this.getUserInfoList();
        if (ZWJSBridge) {
            ZWJSBridge.setTitle({
                "title": "美丽乡居贷"
            }).then(res => {
            }).catch(err => {
            })
        }
    },
    methods: {
        //获取联系人列表
        async getUserInfoList() {
            let param = {
                "cityCode": window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : window.localStorage.getItem("citycode"),
                // "secondBranch": "",
                // "secondBranchAddress": "",
                // "contactManagerName": "",
                "pageNo": 1,
                "pageSize": 10
            }
            let result = await zhejiangVillageLoanInfolist(param);
            debugger
            if (result.data.data && result.data.data.pageList.length > 0) {
                debugger
                if(result.data.data.pageList.length>1){
                    this.ListData=[];
                }else{
                    this.ListData = result.data.data.pageList;
                }
               
                
            }else{
                this.ListData=[];
            }
        },
        phoneCall(data) {
            ZWJSBridge.onReady(() => {
                ZWJSBridge.phoneCall({
                    corpId: data
                })
                    .then((result) => { })
                    .catch((error) => { })
            })
        },
    }
}
</script>
<style>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>
<style lang="scss">
#Ruralcredit {
    background: #ffffff;
    font-size: 14px;
    height: 100vh;
    overflow-y: auto;

    .subtitle {
        width: 170px;
        height: 40px;
        background: linear-gradient(90deg, #EFCD6D, #E9BA4C);
        border-radius: 20px;
        line-height: 40px;
        text-align: center;
        color: #BF5F1E;
        font-weight: bold;
        font-size: 20px;
    }

    .content {
        width: 100%;
        background: #ffffff;
        position: absolute;
        top: 340px;
        border-radius: 34px 34px 0px 0px;
        padding: 20px;

        p {
            margin-bottom: 10px;
        }

        height: 420px;
        overflow-y: auto;
    }

    .van-steps--vertical {
        padding: 18px 18px 18px 18px;
    }

    .divConent {
        border-radius: 10px;
        box-shadow: 1px 1px 4px 4px #e9e7e7;
        padding: 15px;
        margin-top: 10px;

        p {
            line-height: 24px;
        }

    }

    // .my-swipe {

    //     #divTree {

    //     }
    // }
}
</style>